<template>
<div class="main_box">
  <div class="add_wrap">
    <div class="tit">
      <h2>基础信息</h2>
      <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
    </div>
    <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
      <el-row>
        <el-form-item label="是否默认模板" prop="mainFlag">
          <el-radio-group v-model="dataForm.mainFlag">
            <el-radio :label="1">默认</el-radio>
            <el-radio :label="2">非默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模板名称" prop="modelName">
          <el-input v-model="dataForm.modelName" @keydown.native="keydown($event)"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="areaIds">
          <Region :areaValues="dataForm.areaIds" :isChangeOnSelect="true" @regionChange="handleRegionChange"></Region>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="dataForm.remark" autocomplete="off" :rows="5" :cols="30"></el-input>
        </el-form-item>
      </el-row>

      <div class="tit">
        <h2>采样价格</h2>
        <div>
          <el-button icon="el-icon-plus" type="success" plain size="medium" @click="AddTables" circle></el-button>
        </div>
      </div>
      <el-row>
        <el-table :data="dataForm.nuclePriceList" style="padding-left: 10px;" >
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button icon="el-icon-minus" type="danger" plain size="medium" @click="DeleteTables(scope.$index)" circle></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号"  align="center"></el-table-column>
          <el-table-column label="最少人数-必填" >
            <template slot-scope="scope">
              <el-input type="number" size="mini" maxlength="3" v-model.trim="scope.row.peopleMin"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="最多人数" >
            <template slot-scope="scope">
              <el-input type="number" size="mini" maxlength="10" v-model.trim="scope.row.peopleMax"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="价格" >
            <template slot-scope="scope">
              <el-input type="number" size="mini" maxlength="10" v-model.trim="scope.row.price"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div class="tit">
        <h2>上传海报模板</h2>
      </div>
      <el-row>
        <el-form-item prop="hbModelUrl">
          <upload-oss folder="hesuan" accept="pdf" :limit="1" @uploadFileList="getHealthFiles"></upload-oss>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item>
          <el-button plain type="primary" @click="submitClick">保 存</el-button>
          <el-button @click="returnList">取 消</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
 </div>
</template>

<script>
import * as message from "@/constants/message";
import Region from "@/components/Region";
import NuclePriceApi from "@/api/sample/nuclePrice";
import UploadOss from '@/components/UploadOss';

export default{
  data(){
      return {
        dataForm:{
          modelId:'',
          modelName:'',
          remark:'',
          mainFlag:'',
          provinceId: "",
          cityId: "",
          areaId:"",
          provinceName: "",
          cityName: "",
          areaName: "",
          hbModelUrl: "",
          nuclePriceList:[],
          areaIds:[]
        },
        loadingIns:false,
        tradeArea:[],
        props:{
          value:'areaId',
          label:'areaName'
        },
        mainFlagList: [
          { label: "是", value:"1"},
          { label: "否", value:"0"}
        ],
        roleRules: {
          modelName: [
            { required: true, message: "请输入模板名称", trigger: "blur" },
            { max: 50, message: '模板名称长度不超过50个字', trigger: 'blur' }
          ],
          mainFlag:[
            {  required: true, message: "请选择是否默认模板", trigger: "change" }
          ],
          areaIds:[
            {  required: true, message: "请选择所在地区", trigger: "change" }
          ],
          hbModelUrl: [
            { required: true, message: "请上传核酸海报模板", trigger: "change" }
          ]
        }
      }
  },
  components: {
    Region,UploadOss
  },
  methods: {
    init(){
      if (this.$route.query.id) {
        this.getData();
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData(){
      let _this = this
      NuclePriceApi.getData({id:_this.$route.query.id})
        .then(res => {
          _this.$Utils.bindingBean(_this.dataForm, res.data)
          let priceList = res.data.nuclePriceList
          if (priceList){
            _this.dataForm.nuclePriceList = priceList.map(item => {
              return {
                peopleMin: item.peopleMin,
                peopleMax: item.peopleMax,
                price: item.price
              }
            })
          }
          _this.dataForm.areaIds = [_this.dataForm.provinceId,_this.dataForm.cityId,_this.dataForm.areaId];
          if (res.data.mainFlag){
            _this.dataForm.mainFlag = parseInt(res.data.mainFlag);
          }
        })
    },
    // 上传病情文件组件传来的文件url集合
    getHealthFiles(val){
      if (val && val.length > 0){
        this.$Utils.notifySuccess("上传成功");
        this.dataForm.hbModelUrl = val[0]
      }
    },
    submitClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
            .then(() => {
              if (this.dataForm.modelId){
                this.editApply();
              }else{
                this.addApply();
              }
          });
        }
      })
    },
    addApply() {
      NuclePriceApi.addData(this.dataForm)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    editApply() {
      NuclePriceApi.editData(this.dataForm)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    handleRegionChange(val){
      this.dataForm.provinceId = val.provinceId;
      this.dataForm.provinceName = val.provinceName;
      this.dataForm.cityId = val.cityId;
      this.dataForm.cityName = val.cityName;
      this.dataForm.areaId = val.areaId;
      this.dataForm.areaName = val.areaName;
      this.dataForm.areaIds = [val.provinceId,val.cityId,val.areaId];
    },
    AddTables(){
      // 添加一列表格
      //var num = this.dataForm.nuclePriceList.length;
      let msg = {peopleMin: '' ,peopleMax: '' ,price: '' };
      this.dataForm.nuclePriceList.push(msg);
    },
    DeleteTables(index){
      // 删除最后一列
      var num = this.dataForm.nuclePriceList.length;
      if(num != 1){
        // 删除指定列
        this.dataForm.nuclePriceList.splice(index,1);
      }else{
        this.$message.error('至少保留一条价格信息！');
      }
    },
    returnList(){
      this.$store.dispatch('delView', this.$route);
      this.$router.push('/sample/nuclePriceModelManagement');
    }
  },
  mounted(){
    this.init()
  }
}
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
<style scoped>
.add_wrap{
  padding-top: 10px;
  padding-left: 23px;
}
.main_box{
  padding: 10px;
}
</style>
